<template>
	<view>
		<view class="main">
			<view class="tit"><text>*</text>卡片名</view>
			<input v-model="title" placeholder="随意取个名字吧" />
			<view class="tit"><text>*</text>类型</view>
			<view class="checkbox">
				<uni-data-checkbox v-model="type" :localdata="range" @change="change"></uni-data-checkbox>
			</view>
			<view v-if="type==1">
				<view class="tit"><text>*</text>说明</view>
				<input v-model="desc" placeholder="请输入说明，建议30字以内" />
				<view class="tit"><text>*</text>微信名片</view>
				<input v-model="head_url" disabled placeholder="格式支持：jpeg/png/jpg/bmp,大小200*200px" />
				<shmily-drag-image :delImage="delImage" v-model="imgArr" keyName="url"
					v-if="imgArr.length!=0"></shmily-drag-image>
				<view class="flex align between btns">
					<view class="flex btn-item1" @click="toUploadImg()">
						<uni-icons type="upload" size="20" color="#fff"></uni-icons>
						<text>上传</text>
					</view>
					<view class="btn-item2" @click="toUrl()">
						选择
					</view>
				</view>
			</view>
			<view v-if="type==2">
				<view class="tit"><text>*</text>h5链接跳转</view>
				<input v-model="h5_url" placeholder="请输入h5链接" />
			</view>
			<view class="tit"><text>*</text>公开显示</view>
			<view class="checkbox">
				<uni-data-checkbox v-model="is_show" :localdata="range2" @change="change2"></uni-data-checkbox>
			</view>
			<view class="tit"><text>*</text>访问次数</view>
			<input v-model="use_count" placeholder="访问次数" />
			<view class="tit"><text>*</text>到期时间</view>
			<input v-model="out_date" placeholder="请选择" disabled @click="show = true" />
			<view class="subBtn" @click="toSubmit">确定</view>
			<u-datetime-picker :show="show" @confirm="confirmDate" @cancel="show = false" v-model="value1"
				mode="date"></u-datetime-picker>
		</view>
	</view>
</template>

<script>
	import {
		getFormat
	} from '@/until/until.js';
	import {
		uploadOss
	} from '@/until/oss/oss.js'
	import {
		storeCardAdd,
		aliossNotify
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				value: '',
				show: false,
				value1: Number(new Date()),
				range: [{
					"value": 1,
					"text": "微信名片"
				}, {
					"value": 2,
					"text": "h5链接跳转"
				}],
				range2: [{
					"value": 0,
					"text": "不显示"
				}, {
					"value": 1,
					"text": "显示"
				}],
				check: 0,
				deadline_time: '',
				title: '', //卡片名
				type: 1, //类型
				desc: '', //说明
				head_url: '', //微信名片
				h5_url: '', //h5链接
				is_show: 0, //是否展示
				use_count: 100, //访问次数
				out_date: getFormat(new Date()), //到期时间
				imgArr: [],
				info: ''
			};
		},
		onShow() {
			if (uni.getStorageSync('image')) {
				this.imgArr = uni.getStorageSync('image')
				let arr = []
				this.imgArr.forEach((item => {
					arr.push(item.url)
				}))
				this.head_url = arr.toString()
			}
		},
		onLoad(option) {
			if (option.item) {
				uni.setNavigationBarTitle({
					title: '编辑'
				})
				let info = JSON.parse(option.item)
				this.info = info
				this.title = info.title
				this.desc = info.desc
				this.type = info.type
				this.head_url = info.head_url
				this.h5_url = info.h5_url
				this.is_show = info.is_show
				this.use_count = info.use_count
				this.out_date = info.out_date
				if (info.head_url != '') {
					this.imgArr = [{
						type: 'image',
						url: info.head_url
					}]
				}

			}
		},
		methods: {
			// 上传图片
			toUploadImg() {
				let that = this
				uni.showLoading({
					title: "loading",
					mask: true
				})
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						console.log(res)
						// OSS上传(得到在oss文件夹下照片路径)
						let fileArr = res.tempFiles
						let length = fileArr.length

						fileArr.forEach((item, index) => {
							that.toOss(item.tempFilePath, index, item.fileType, item.size)
						})
					},
					fail() {
						uni.hideLoading()
					}
				})
			},
			async toOss(item, index, fileType, size) {
				const time = uni.$u.timeFormat(new Date().getTime(), 'yyyymm/dd')
				let ossPath = await uploadOss({
					filePathFore: time + '/',
					filePath: item,
				})
				let url = 'https://hongchuquan.oss-cn-shanghai.aliyuncs.com/' + ossPath
				this.head_url = url
				this.imgArr = [{
					type: 'image',
					url: url
				}]
				// this.toComf(url, fileType, size)
			},
			async toComf(url, fileType, size) {
				uni.showLoading({
					title: "loading",
					mask: true
				})
				const result = await aliossNotify({
					url: url,
					name: new Date().getTime(),
					size: size,
					type: fileType,
				})
				if (result.code == 1) {
					uni.hideLoading()
					uni.showToast({
						title: '上传成功'
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			toSubmit() {
				let obj = {
					'row[title]': this.title,
					'row[type]': this.type,
					'row[desc]': this.desc,
					'row[head_url]': this.head_url,
					'row[h5_url]': this.h5_url,
					'row[is_show]': this.is_show,
					'row[use_count]': this.use_count,
					'row[out_date]': this.out_date,
				}
				console.log(obj)
				let that = this
				if (that.info == '') {
					uni.showModal({
						content: '确定要添加吗?',
						success: (res) => {
							if (res.confirm) {
								that.addCom()
							}
						}
					})
				} else {
					uni.showModal({
						content: '确定要修改吗?',
						success: (res) => {
							if (res.confirm) {
								that.editCom()
							}
						}
					})
				}

			},
			async addCom() {
				let obj = {
					'row[title]': this.title,
					'row[type]': this.type,
					'row[desc]': this.desc,
					'row[head_url]': this.head_url,
					'row[h5_url]': this.h5_url,
					'row[is_show]': this.is_show,
					'row[use_count]': this.use_count,
					'row[out_date]': this.out_date,
				}
				const result = await storeCardAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: '添加成功'
					})
					setTimeout(() => {
						uni.navigateBack()
						uni.removeStorageSync('image')
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}
			},
			editCom() {
				let obj = {
					'row[title]': this.title,
					'row[type]': this.type,
					'row[desc]': this.desc,
					'row[head_url]': this.head_url,
					'row[h5_url]': this.h5_url,
					'row[is_show]': this.is_show,
					'row[use_count]': this.use_count,
					'row[out_date]': this.out_date,
				}
				// const result = await storeCardAdd(obj)
				// if (result.code == 1) {
				// 	uni.showToast({
				// 		title: '修改成功'
				// 	})
				// 	setTimeout(() => {
				// 		uni.navigateBack()
				// 	}, 500)
				// } else {
				// 	uni.showToast({
				// 		title: result.msg,
				// 		icon: 'none'
				// 	})
				// }
				let that = this
				uni.request({
					url: 'https://jzxt.jiugezixun.cn/storeadmin/card/edit/ids/' + that.info.id,
					data: obj,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'XMLHttpRequest',
						'Cookie': uni.getStorageSync('cookies') // 从存储中读取cookies并设置到请求头
					},
					success: result => {
						if (result.data.code == 1) {
							uni.showToast({
								title: '修改成功'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						} else {
							uni.showToast({
								title: result.data.msg
							})
						}
					},
					fail: result => {
						uni.hideLoading();
					}
				})
			},
			delImage(done) {
				let that = this
				uni.showModal({
					content: '是否删除?',
					success: (res) => {
						if (res.confirm) {
							// 执行 done() 删除
							done()
							let arr = []
							that.imgArr.forEach((item => {
								arr.push(item.url)
							}))
							that.head_url = arr.toString()
							console.log(that.head_url)
						}
					}
				})
			},
			toUrl() {
				uni.navigateTo({
					url: '/pages/material/material?type=1&type2=2'
				})
			},
			change(e) {
				console.log(e)
				this.type = e.detail.value
			},
			change2(e) {
				console.log(e)
				this.is_show = e.detail.value
			},
			onConfirm(e) {
				console.log(e)
				this.type = e.value[0]
				this.show = false
			},
			confirmDate(e) {
				console.log(e)
				this.show = false
				this.out_date = getFormat(e.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-top: 15rpx;
		background: white;
		padding: 7rpx 30rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.tit {
			font-size: 28rpx;
			margin: 17rpx 0;

			text {
				color: #FF0000;
			}
		}

		input {
			padding: 14rpx 15rpx;
			font-size: 20rpx;
			border: solid 1rpx #707070;
			border-radius: 10rpx;
		}

		textarea {
			border: solid 1rpx #707070;
			padding: 15rpx 9rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
		}

		.btns {
			margin: 20rpx 40rpx;

			view {
				width: 250rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 10rpx;
				justify-content: center;
				color: white;
				text-align: center;
			}

			.btn-item1 {
				background: #DD4E3D;
			}

			.btn-item2 {
				background: #5D9CEB;
			}

			text {
				margin-left: 10rpx;
			}
		}

		.btns2 {
			margin: 20rpx 0;

			view {
				width: 200rpx;
			}
		}

		.tips {
			font-size: 20rpx;
			margin: 15rpx 0;
		}

		.subBtn {
			font-size: 30rpx;
			color: white;
			padding: 8rpx 95rpx;
			background: #5D9CEB;
			width: fit-content;
			margin: 137rpx auto;
			border-radius: 10rpx;
		}
	}
</style>